<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding:0;
      border: 0 none;
      outline-style:none;
      text-decoration: none;
    }
    html,body{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .top_btn{
      overflow: hidden;
    }
    .top_btn a{
      width: 300px;
      height: 50px;
      line-height: 50px;
      display:block;
      margin:10px auto;
      text-align: center;
      color: #999;
      font-size: 50px;
    }
    .model_box{
      width: 100%;
      height: 100%;
      position: absolute;
      left:0;
      top:0;
      background-color: rgba(0,0,0,0.1);
      display:none;
    }
    .login_window{
      width: 500px;
      height: 300px;
      box-shadow: 0px 0px 10px #ccc;
      position: absolute;
      left:50%;
      top:50%;
      margin-left: -250px;
      margin-top: -150px;
      display: none;
      z-index: 1;
      background-color: #fff;
      cursor:move;
    }
    .login_window form{
      width: 400px;
      height: 200px;
      margin: 50px auto;
      overflow: hidden;
    }
    .username{
      margin: 20px 0;
    }
    .username input{
      width: 300px;
      height: 30px;
      border: 1px solid #ccc;
      padding-left: 10px;
      box-sizing:border-box;
    }
    .user_pwd input{
      width: 300px;
      height: 30px;
      border:1px solid #ccc;
      padding-left: 10px;
      box-sizing: border-box;
    }
    label{
      width: 80px;
      display: inline-block;
      text-align: right;
    }
    .login_btn a{
      width: 200px;
      height: 40px;
      display: block;
      margin: 0 auto;
      text-align: center;
      line-height: 40px;
      margin-top:16px;
      color:#888;
      font-size: 30px;
      border: 1px solid #ccc;
      box-shadow: 0px 0px 5px #eee;
    }
    .username span{
      font-size: 12px;
      margin-left: 90px;
      color:red;
      display: none;
    }
    .user_pwd span{
      font-size: 12px;
      margin-left: 90px;
      color:red;
      display: none;
    }
    .close{
      display: block;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      box-shadow: 0px 0px 10px #ccc;
      border-radius: 50%;
      cursor:pointer;
      position: absolute;
      right: -20px;
      top:-40px;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div class="top_btn">
    <a href="#">用户登录</a>
  </div>
  <!-- 登录窗口 -->
  <div class="login_window">
    <form action="">
      <div class="username">
        <label for="uname">用户名：</label>
        <input type="text" placeholder="手机号/邮箱账号" id="uname" autofocus>
        <span>用户名不能为空</span>
      </div>
      <div class="user_pwd">
        <label for="pwd">密码：</label>
        <input type="password" placeholder="请输入密码" id="pwd">
        <span>密码不能为空</span>
      </div>
      <div class="login_btn">
        <a href="#">登录</a>
      </div>
    </form>
    <span class="close">关闭</span>
  </div>
  <!-- 模态窗口 -->
  <div class="model_box"></div>
  <script>
    var top_btn = document.querySelector('.top_btn a');
    var login_window = document.querySelector('.login_window');
    var model_box = document.querySelector('.model_box');
    var close = document.querySelector('.close');
    var uname = document.getElementById('uname');
    var pwd = document.getElementById('pwd');
    var login_btn = document.querySelector('.login_btn')
    var tips_uname = document.querySelector('.username span:nth-child(3)');
    var tips_pwd = document.querySelector('.user_pwd span:nth-child(3)');
    
    top_btn.addEventListener('click',function(){
      login_window.style.display = 'block';
      model_box.style.display = 'block';
    });
    login_window.addEventListener('mousedown',function(e){
      var mouse_x = e.clientX - this.offsetLeft;
      var mouse_y = e.clientY - this.offsetTop;
      document.addEventListener('mousemove',fun)
        function fun(e){
          login_window.style.left = e.pageX - mouse_x + 250 + 'px';
          login_window.style.top = e.pageY - mouse_y + 150 + 'px';
        };
      login_window.addEventListener('mouseup',function(){
        document.removeEventListener('mousemove',fun);
      });
    });
    close.onclick = function(){
      login_window.style.display = 'none';
      model_box.style.display = 'none';
      uname.value = '';
      pwd.value = '';
    };
    login_btn.onclick = function(){
      var flag = true;
      if(uname.value == '' || uname == null){
        tips_uname.style.display = 'block';
        flag = false;
      };
      if(pwd.value == '' || pwd == null){
        tips_pwd.style.display = 'block';
        flag = false;
      };
      if(flag){
        login_window.style.display = 'none';
        model_box.style.display = 'none';
        uname.value = '';
        pwd.value = '';
        tips_uname.style.display = 'none';
        tips_pwd.style.display = 'none';
      };
    };
  </script>
</body>
</html>